import React, { Component } from 'react';
import { findFilmsPage } from '@/api/MaiZuo';

export default class FilmList extends Component {
  state = {
    list: [],
  };

  componentDidMount() {
    console.log('componentDidMount', this.props);

    findFilmsPage(1, 10, this.props.type).then((res) => {
      console.log('films', res);

      this.setState({
        list: res.films,
      });
    });
  }

  render() {
    console.log('render', this.props);
    return (
      <ul>
        {this.state.list.map((item) => {
          return <li key={item.filmId}>{item.name}</li>;
        })}
      </ul>
    );
  }

  shouldComponentUpdate(nextProps, nextState) {
    if (
      JSON.stringify(nextProps) !== JSON.stringify(this.props) ||
      JSON.stringify(nextState) !== JSON.stringify(this.state)
    ) {
      console.log('shouldComponentUpdate 放行更新');
      return true; // 放行更新
    }
    return false; // 阻止更新
  }

  //WARNING! To be deprecated in React v17. Use new lifecycle static getDerivedStateFromProps instead.
  componentWillReceiveProps(nextProps) {
    if (JSON.stringify(nextProps) === JSON.stringify(this.props)) {
      console.log('componentWillReceiveProps 阻止');
      return;
    }
    console.log('componentWillReceiveProps', nextProps, this.props);

    findFilmsPage(1, 10, nextProps.type).then((res) => {
      console.log('films', res);

      this.setState({
        list: res.films,
      });
    });
  }
}
